<template>
  <div class="app-cont">
    <!--这是 Header 区域 -->
    <div class="main">
      <div class="main-container">
        <div class="fenlei">
          <div class="address">
            <ul >
              <li v-for="item in address">
                <div class="top">
                  <div class="toptop">
                    <div class="name">
                      {{item.name}}
                    </div>
                    <div class="tel">
                      {{item.number}}
                    </div>
                  </div>

                  <div class="dizhi">
                    税号:{{item.numer}}
                  </div>
                </div>
                <div class="bottom">
                  <div class="select">
                    <img src="../assets/icon/ico_1@1x.png" alt="">
                    设为默认
                  </div>
                  <div class="operate">
                    <div ><img src="../assets/icon/ico_bianji@1x.png" alt="">编辑</div>
                    <div class="right"><img src="../assets/icon/ico_shanchu@1x.png" alt="">删除</div>
                  </div>
                </div>
              </li>
            </ul>

            <a href="javascript:;" class="btn-next" @click="NewCard">添加新银行卡</a>
          </div>
        </div>
      </div>
      <!-- 底部的 Tabbar 区域 -->

    </div>
  </div>
</template>

<script>
  import wx from 'weixin-js-sdk'
  import { wxHttpTool,wx_config, http_getParam, get_shopQrcoe,wx_share,wx_hideAllMenu } from '../components/httpUtil/httpUtil'
  import {msg_10046} from '../message/msg_10046'
  export default {
    name: 'card',
    data () {
      return {
        address: [
          {
            name: '张三',
            number: '18888888888',
            numer: '1253151646548'
          },
          {
            name: '张三',
            number: '18888888888',
            numer: '629562226251'
          }
        ]
      }
    },
    methods: {
      NewCard () {
        this.$router.push({name: 'newCard'})
      }
    },
    created(){
      wxHttpTool.wxAuthor(this, function (varRet, varJson, varThis = this) {
        if (varRet == -1) {
          varThis.alertTip('网络错误');
          varThis.go = function () {
            varThis.showAlert = false;
          }

        }
        // 关注钱应该判断下是否已经关注过了
        msg_10046.send(varThis,msg_10046.entity(),function(varThis,res){
          varThis.wxlist=res.data.p.sign
          wx_config(varThis.wxlist);
          wx_hideAllMenu();
          wx.hideMenuItems({
            //禁用单独分享朋友圈QQ空间等功能
            menuList: ["menuItem:share:timeline","menuItem:share:QZone","menuItem:share:qq"] // 要隐藏的菜单项，所有menu项见附录3
          });
        })


      },this.type)
    }
  }
</script>

<style lang="scss" scoped>
  .app-cont {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    .header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 80px;
    }
    .main {
      flex: 1;
      position: relative;
      .main-container {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
      }
    }
  }



  .fenlei {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    background-color: #f4f4f4;
    display: flex;
    flex-direction: column;
    ::-webkit-scrollbar {
      display: none;
    }

  }

</style>
<style lang="scss">
  a:hover, a:visited, a:link, a:active {
    text-decoration: none;
    outline: none;
  }
  .fenlei{
    .address {
      position: relative;
      margin-top: 30px;
      width: 100%;
      /*height: 298px;*/
      height: 100%;
      background: #f4f4f4;
      ul {
        li {
          height: 300px;
          background-color: #fff;
          margin-bottom: 30px;
          .top {
            height: 208px;
            box-sizing: border-box;
            padding-top: 46px;
            font-size: 28px;
            color: #3b3b43;
            border-bottom: 1px solid #dcdcdc;
            .toptop{
              height: 40px;
              .name {
                float: left;
                padding-left: 34px;
              }
              .tel {
                float: right;
                padding-right: 30px;
              }
            }

            .dizhi {
              font-size: 26px;
              color: #a1a1a1;
              float: left;
              padding: 32px 30px 0;
            }

          }
          .bottom {
            position: relative;
            width: 100%;

            .select {
              float: left;
              padding-top: 26px;
              padding-left: 30px;
              img{
                vertical-align: middle;
                width: 32px;
                height: 32px;
                padding-right: 8px;
              }
            }
            .operate{
              width: 240px;
              height: 90px;
              float: right;
              padding-right: 14px;
              .right{
                padding-left: 42px;
              }
              div{
                float: left;
                padding-top: 26px;

                img{
                  vertical-align: middle;
                  width: 26px;
                  height: 26px;
                  padding-right: 12px;
                }
              }
            }
          }
        }
      }
      .btn-next{
        display: block;
        position: absolute;
        bottom: 20px;
        left:50%;
        transform: translate(-50% , 0);
        width: 580px;
        height: 74px;
        border-radius: 35px;
        border: 1px solid #fe3519;
        color: #fe3519;
        text-align: center;
        line-height: 74px;
        font-size: 26px;
      }
    }

  }

</style>
